define(function(require,exports,module){
   'use strict';

    var React = require('react');
    var Highcharts = require('highcharts');
    var async = require('async');

    module.exports = React.createClass({displayName: "exports",
        getInitialState:function(){
            return {
                url:this.props.url,
                ajax_data:this.props.ajax_data,
                category:[],
                series:[]
            };
        },
        componentDidMount:function(){
            var url = this.state.url;
            var data = this.props.ajax_data;

            var options = {
                colors: [
                    '#058DC7',
                    '#50B432',
                    '#ED561B',
                    '#DDDF00',
                    '#24CBE5',
                    '#64E572',
                    '#FF9655',
                    '#FFF263', 
                    '#6AF9C4'
                ], 
                chart: {
                    renderTo: this.props.id,
                    type: 'areaspline'
                },
                title: {
                    text: this.props.title
                },
                subtitle: {
                    text: this.props.description
                },
                xAxis: {
                    categories: this.state.category
                },
                yAxis: {
                    title: {
                        text: this.props.y
                    },
                    labels: {
                        formatter: function () {
                            return this.value / 1000 + 'k';
                        }
                    }
                },
                tooltip: {
                    formatter: function () {
                        var s = '<b>' + this.x + '</b>';

                        $.each(this.points, function () {
                            s += '<br/><span style="color:'+this.series.color+'">' + this.series.name + '</span>: ' +
                                Highcharts.numberFormat(this.y,0,'.',',');
                        });

                        return s;
                    },
                    crosshairs: true,
                    shared: true
                },
                plotOptions: {
                    areaspline: {
                        fillOpacity: 0.5
                    }
                },
                series: this.state.series
            };

            var chart = new Highcharts.Chart(options);

            var get_ajax_data = function(){
                var tmp = [];

                async.series({
                    
                    ios:function(done){
                        $.ajax({
                            url:url,
                            data:{'sql':data.ios_sql,'access_token':data.access_token},
                            type:'post',
                            dataType:'json',
                            success:function(ios_data){
                                done(null,ios_data);
                            },
                            error:function(xhr,status,err){
                                console.error('获取数据失败！',status,err.toString());
                            }
                        });
                    },
                    android:function(done){
                        $.ajax({
                            url:url,
                            data:{'sql':data.android_sql,'access_token':data.access_token},
                            type:'post',
                            dataType:'json',
                            success:function(android_data){
                                done(null,android_data);
                            },
                            error:function(xhr,status,err){
                                console.error('获取数据失败！',status,err.toString());
                            }
                        });
                    }
                },function(error,result){
                    var category = [];
                    var series = [];

                    result.ios.map(function(i){
                        category.push(i.name);
                    });

                    //ios数量
                    var tmp = [];
                    result.ios.map(function(item){
                        tmp.push(item.value);
                    });
                    series.push({'name':'IOS',data:tmp});

                    //android数量
                    tmp = [];
                    result.android.map(function(item){
                        tmp.push(item.value);
                    });
                    series.push({'name':'Android',data:tmp});

                    //总量
                    var long = result.android.length >= result.ios.length ? result.android : result.ios;
                    var short = result.ios.length >= result.android.length ? result.ios : result.android;
                    tmp = [];
                    for(var i=0; i<short.length; i++){
                        tmp.push(parseInt(short[i].value) + parseInt(long[i].value));
                    }
                    series.push({'name':'总量',data:tmp});
                    
                    //配置highcharts的option选项
                    options.series = series;
                    var chart = new Highcharts.Chart(options);
                    chart.xAxis[0].setCategories(category);
                    chart.redraw();
                });
            };

            get_ajax_data();
            setInterval(get_ajax_data,this.props.interval ? this.props.interval : 500000);
        },
        render:function(){
            return (
                React.createElement("div", {className: this.props.className, id: this.props.id})
            );
        }
    });
});